<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>父子组件的传参</title>
</head>

<body>
    <div id="app">
        <div>-------------父组件的内容----------</div>
        <h2>实例</h2>
        <h2>{{ msg }}</h2>
        <div>-------------子组件的内容----------</div>
        <comp :compmsg="msg"></comp>
    </div>

    <template id="comp">
    <div>
        <h2>子组件标题</h2>
        <p>{{compmsg}}</p>
    </div>
</template>

    <script src="./vue.js"></script>
    <script>
        /**
         * 父组件向子组件传递参数
         * 在父组件的子组件中,通过自定义属性名,向子组件传递数据,子组件中使用props接受这个属性,然后就可以随便使用了
         *
         *  通过props向子组件传递数据
         *      在子组件中 直接使用props属性来接受父组件的参数
         *      props属性值可以为数组,也可以是一个对象
         *      当props属性为数组的时候,数组中的每一项都是参数,每一项的数据类型是字符串
         *      props中的任何属性都可以认为是data中的属性,读取和赋值都和操作data是同样的
         *
         */

        //子组件
        Vue.cd("comp", {
            template: "#comp",
            props: ["compmsg"],
            data: function() {
                return {
                    // compMsg:"xxx"
                }
            }
        })

        //vue 实例1 root组件 (根组件)
        const app = new Vue({
            el: "#app",
            data: {
                msg: "hahahah"
            }
        })
    </script>
</body>

</html>